<template>
  <div>
    <div class="header">
      <h2>标题标题标题</h2>
      <p><span>发表时间:2018.9.1</span><span>点击:0次</span></p>
    </div>
    <div class="content">
      <p>
        这些是假数据真实的数据可以通过ajax请求获取并渲染到页面上，日后学了ajax重新改
         这些是假数据真实的数据可以通过ajax请求获取并渲染到页面上，日后学了ajax重新改
      </p>
      <p>
        这些是假数据真实的数据可以通过ajax请求获取并渲染到页面上，日后学了ajax重新改
         这些是假数据真实的数据可以通过ajax请求获取并渲染到页面上，日后学了ajax重新改
      </p>
      <p>
        这些是假数据真实的数据可以通过ajax请求获取并渲染到页面上，日后学了ajax重新改
         这些是假数据真实的数据可以通过ajax请求获取并渲染到页面上，日后学了ajax重新改
      </p>
    </div>
    <comment-box></comment-box>
  </div>
</template>
<script>
// import comment-box from "../subcomponents/comment.vue";
import comment from "../subcomponents/comment.vue";

export default {
  data(){
    return{

    }
  },
  methods : {

  },
  components : {
    'comment-box' : comment,
  }
}
</script>
<style scoped>
  .header{
    height: 100px;
    border-bottom: 1px gray solid;
    margin: 6px;
  }
  .header p{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    color: blue;
  }
  .content{
    padding: 5px;
    border-bottom: 1px grey solid;
  }
  .content p {
    text-indent: 2em;
    color: black;
  }
</style>


